<template>
  <!-- 我正在追 -->
  <div class="container" v-if="chasingList.length">
    <div class="left">
      <img src="@/assets/images/zxjt/juxing.png" alt="">
      <span>我正在追</span>
    </div>
    <div class="chasing">
      <ul>
        <li v-for="(item, index) in chasingList" :key="index" @click="clickActive(item, index)">
          <img :src="item.imagUrl + '?x-oss-process=image/resize,m_fixed,h_158,w_280'" alt="">
          <p class="p-top">{{ item.title }}</p>
          <p class="p-bottom">已看到 {{ item.playProcess == null ? "0%" : item.playProcess }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageArr: Object,
  },
  data() {
    return {
      chasingList: [],
      chasing: false,
    }
  },
  created() {
    // this.getChasingList()
  },
  watch: {
    '$store.state.isYk'(val, oldVal) {
      if (!val) {
        this.getChasingList()
      }
    }
  },
  //取消了首页缓存 所以每次都会进入都会走create
  activated() {
    if (!this.$store.state.isYk) {
      this.getChasingList()
    }
  },
  methods: {
    getChasingList() {
      // 请求正在追列表
      let limit = 5; //固定参数 需要展示几个就传几个
      this.$http.get('/h5live/getRecordListLimit?limit=' + limit).then(res => {
        if (res.data.code == "000000") {
          let data = res.data.data
          if (data.length > 5) {
            data.splice(5)
          }
          this.chasingList = data;
        }
      }).catch(function (error) {
        console.log(error);
      });
    },
    clickActive(item, index) {
      this.LiveRoomClickDot(item.vid, item.title, item.status, item.creator)
      // 统一跳转
      this.$router.push(`/${this.$channel}/liveBack/${item.vid}?dzhPage=true`);
    },
    //直播间点击埋点
    LiveRoomClickDot(roomId, roomName, roomStatus, roomCreator) {
      if (this.$channel !== 'zxjt') return
      $sensorsTrack('liveBroadcast_liveRoomClick',
        {
          page_name: '首页',
          module_name: '我正在追',
          user_nickname: localStorage.getItem("userNickName"),
          live_room_id: roomId,
          live_room_name: roomName,
          live_room_status: roomStatus == '1' ? '直播中' : roomStatus == '0' ? '预告' : '回看',
          live_room_creator: roomCreator
        }
      );
    }
  }
}
</script>

<style scoped="scoped" lang="less">
.container {
  margin: 50px 0 0 30px;
  padding-right: 30px;
  position: relative;

  .left {
    position: relative;
    img {
      vertical-align: bottom;
      height: 18px;
    }
    span {
      position: absolute;
      bottom: 9px;
      left: 0;
      font-size: 36px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
.chasing {
  width: 100%;
  margin-top: 30px;
  overflow-x: scroll;

  /* flex-flow:row nowrap;
    overflow-x: auto; */
  ul {
    width: 100%;
    display: flex;
    overflow-x: scroll;
    list-style: none;
    li {
      width: 280px;      
      img {
        width: 280px;
        height: 158px;
        border-radius: 10px;
      }
    }
    li:not(:first-child){
      margin-left: 30px;
    }
  }
}



.p-top {
  font-size: 26px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #3C3D43;
  line-height: 37px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.p-bottom {
  font-size: 22px;
  height: 30px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
  line-height: 30px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}</style>
